import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Navigator, Icon, Block } from '@tarojs/components'
import './list.scss'
import { AtSearchBar, AtIcon } from 'taro-ui'
import { MySellerListItem } from '../../utils/server.interface'
import { http } from '../../utils/http'
import { MY_SELLER_LIST } from '../../constants/api'
import { user } from '../../utils/user.service'
import {GetRequest,vcmonitor} from "../../utils/tools";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import Index from "../components/water-mark/index";

export default class Children extends Component {
    state: {
        index: number
        searchText: string
        loadMoreStatus: "more" | "loading" | "noMore"
        sellerList: MySellerListItem[]
        noItem: boolean
        all: number
        name: string
        id: string
    } = {
        searchText: '',
        index: 0,
        loadMoreStatus: 'loading',
        sellerList: [],
        noItem: false,
        all: 0,
        name: '',
        id: ''
    }
    stage = ['本月','上月','全部']
    page = 1
    async componentDidShow(){
      vcmonitor(this)
    }
    async UNSAFE_componentWillMount() {
      if(process.env.TARO_ENV==='h5'){
        await h5Wx.getConfig()
      }
        const isLogin = await user.checkLogin()
        if(!isLogin){
            Taro.showToast({
                title: '你还未登录，请登录',
                icon: 'none',
            })
            const timer = setTimeout(() => {
                clearTimeout(timer)
                Taro.switchTab({ url: '/pages/index/index' })
            }, 1500)
            return
        }
        const { id = '', name = '' } = Taro.getCurrentInstance().router.params
        Taro.showLoading({ title: '加载中...'})
        const sellerList = await this.getData(this.page, id)
        if(sellerList) {
            if(sellerList.length === 0) {
                this.setState({ noItem: true, sellerList, id, name })
            } else {
                this.setState({ sellerList, id, name })
            }
        } else {
            this.setState({ noItem: true, id, name })
        }
        setTimeout(() => {
            Taro.hideLoading()
        }, 100)
    }
    async onReachBottom() {
        if(this.state.loadMoreStatus != 'noMore') {
            this.setState({loadMoreStatus: 'loading'}, async () => {
                this.page++
                const sellerList = await this.getData(this.page)
                const old = this.state.sellerList
                if(sellerList) {
                    this.setState({ sellerList: [...old, ...sellerList] })
                }
            })
        }
    }
    searchClick() {
        this.setState({ sellerList: [], loadMoreStatus: 'loading' }, async () => {
            this.page = 1
            const sellerList = await this.getData(this.page)
            if(sellerList) {
                if(sellerList.length === 0) {
                    this.setState({ noItem: true, sellerList })
                } else {
                    this.setState({ sellerList })
                }
            } else {
                this.setState({ sellerList })
            }
        })
    }
    searchChange(value) {
        this.setState({ searchText: value })
    }
    clearSearch() {
        this.setState({ sellerList: [], searchText: '', loadMoreStatus: 'loading' }, async () => {
            this.page = 1
            const sellerList = await this.getData(this.page)
            if(sellerList) {
                if(sellerList.length === 0) {
                    this.setState({ noItem: true, sellerList })
                } else {
                    this.setState({ sellerList })
                }
            } else {
                this.setState({ sellerList })
            }
        })
    }
    typeChange(index){
        this.setState({ index, sellerList: [], loadMoreStatus: 'loading' }, async () => {
            this.page = 1
            const sellerList = await this.getData(this.page)
            if(sellerList) {
                if(sellerList.length === 0) {
                    this.setState({ noItem: true, sellerList })
                } else {
                    this.setState({ sellerList })
                }
            } else {
                this.setState({ sellerList })
            }
        })
    }
    async getData(page, id = '') {
        const index = this.state.index
        const sellerList = await http.get<MySellerListItem[]>(MY_SELLER_LIST, {id, pageNumber: page, dateFlag: this.stage[index], k: this.state.searchText})
        if(sellerList && sellerList.length === 10){
            this.setState({ loadMoreStatus: 'more'})
        } else {
            this.setState({ loadMoreStatus: 'noMore'})
        }
        return sellerList
    }
    async secondry(id='', name='', count = 0) {
        if(count > 0) {
          let mpkey = ''
          const uInfo = Taro.getStorageSync('user') || ''
          if (uInfo && uInfo.mpkey && uInfo.mpkey !== 'undefined') {
            mpkey = uInfo.mpkey
          }
          Taro.navigateTo({url: `/distributor/list/children?id=${id}&name=${name}`+ '&mpkey=' + mpkey})
        } else {
            Taro.showToast({ title: '没有下级了~', icon: 'none'})
        }
    }
    render() {
        const { searchText, sellerList, noItem, all, name } = this.state
        return(
            <View className='dist-list-root'>
                <GzhAuth />
              <Index />
                <AtSearchBar onClear={this.clearSearch.bind(this)} onActionClick={this.searchClick.bind(this)} value={searchText} onChange={this.searchChange.bind(this)}></AtSearchBar>
                    <View className='header'>
                        <View className='title'>{name}的{process.env.fxName}</View>
                    </View>
                    {sellerList.length > 0 && <View className='list-box'>
                        {sellerList.length > 0 && sellerList.map(item => <View className='list-item' key={item.id}>
                            <View className='head'>
                                <View className='name-box' onClick={this.secondry.bind(this, item.id, item.real_name, item.team_count)}><Text className='name'>{item.real_name}</Text><Text className='phone'>{item.phone}</Text></View>
                                <Navigator className='order-number' url={`/distributor/order/reseller-order?sid=`+item.id}><AtIcon prefixClass='xxhz' value='fenxiaodingdan' size='16'></AtIcon><Text decode> {item.off_order}单</Text></Navigator>
                            </View>
                            {all === 0 && <Block>
                                <View className='stage'>
                                    <View className='stage-item'>{this.stage[this.state.index]}</View>
                                    <View className='stage-item'>总计</View>
                                </View>
                                <View className='statistics'>
                                    <View className='sta-box'>
                                        <View className='number'>{item.self_range}</View>
                                        <View className='label'>销售</View>
                                    </View>
                                    <View className='sta-box'>
                                        <View className='number'>{item.rebate_range}</View>
                                        <View className='label'>返利</View>
                                    </View>
                                    <View className='sta-box'>
                                        <View className='number'>{item.self_all}</View>
                                        <View className='label'>销售</View>
                                    </View>
                                    <View className='sta-box'>
                                        <View className='number'>{item.rebate_all}</View>
                                        <View className='label'>返利</View>
                                    </View>
                                </View>
                            </Block>}
                            {all === 1 && <Block>
                                <View className='all-title'>{this.stage[this.state.index]}</View>
                                <View className='all-content'>
                                    <View className='all-item'>
                                        <View className='number'>{item.team_count_range}</View>
                                        <View className='label'>发展人数</View>
                                    </View>
                                    <View className='all-item'>
                                        <View className='number'>{item.team_range}</View>
                                        <View className='label'>团队销售额</View>
                                    </View>
                                    <View className='all-item'>
                                        <View className='number'>{item.self_range}</View>
                                        <View className='label'>个人销售额</View>
                                    </View>
                                    <View className='all-item'>
                                        <View className='number'>{item.team_rebate_range}</View>
                                        <View className='label'>团队返利</View>
                                    </View>
                                    <View className='all-item'>
                                        <View className='number'>{item.rebate_range}</View>
                                        <View className='label'>个人返利</View>
                                    </View>
                                </View>
                                <View className='all-title total'>总计</View>
                                <View className='all-content'>
                                    <View className='all-item'>
                                        <View className='number'>{item.team_count}</View>
                                        <View className='label'>总团队人数</View>
                                    </View>
                                    <View className='all-item'>
                                        <View className='number'>{item.team_all}</View>
                                        <View className='label'>团队总销售额</View>
                                    </View>
                                    <View className='all-item'>
                                        <View className='number'>{item.self_all}</View>
                                        <View className='label'>个人总销售额</View>
                                    </View>
                                    <View className='all-item'>
                                        <View className='number'>{item.team_rebate_all}</View>
                                        <View className='label'>团队总返利</View>
                                    </View>
                                    <View className='all-item'>
                                        <View className='number'>{item.rebate_all}</View>
                                        <View className='label'>个人总返利</View>
                                    </View>
                                </View>
                            </Block>}
                        </View>)}
                    </View>}
                {noItem && <View className='no-item'>
                    <Icon type='info' size='93' color={`${process.env.mainColor}`}></Icon>
                    <View className='title'>提示</View>
                    <View className='tips'><Text decode>您还没有下属{process.env.fxName}&nbsp;</Text><Navigator className='link'>马上邀请</Navigator></View>
                </View>}
            </View>
        )
    }
}
